<template>
  <el-progress
    v-show="isShowProgress"
    type="circle"
    :percentage="percentage"
    style="margin-right: 15px"
  />
  <el-upload
    v-show="!isShowProgress"
    class="avatar-uploader"
    action="/yyx/aliUpload"
    :show-file-list="false"
    :headers="headerObj"
    :on-success="handleImageSuccess"
    :before-upload="beforeImageUpload"
    :on-progress="handleProgress"
  >
    <img
      v-if="imageUrl"
      :src="imageUrl"
      class="avatar"
      @load="isShowProgress = false"
    />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps, UploadProgressEvent } from 'element-plus'

let headerObj = reactive({
  Authorization:
    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImlzX2FkbWluIjp0cnVlLCJpYXQiOjE3MDQyODkyNjEsImV4cCI6MTcwNDM3NTY2MX0.RuSmFg3VeHklSQN3bh4ocuePO-qMx-6dRjl5US1Jsu0'
})

//声明属性
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
//声明事件消息
const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

//是否显示进度条
const isShowProgress = ref(false)
//保存图片内存中的临时地址

//如果这样处理，这里只是第一次把props.modelValue，赋给了imageUrl，没有收集变化
//const imageUrl = ref(props.modelValue)
const imageUrl = ref('')

//监听imageUrl的值变化
watchEffect(() => {
  imageUrl.value = props.modelValue
})
//上传进度值
const percentage = ref(0)

//上传组件的进度改变回调函数
const handleProgress = (evt: UploadProgressEvent) => {
  console.log(evt)
  percentage.value = Math.floor(evt.percent)
}

//图片上传成功之后的回调
const handleImageSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  //图片的服务器地址，真正的地址
  console.log(response.data.course_img)

  imageUrl.value = URL.createObjectURL(uploadFile.raw!)

  emits('update:modelValue', response.data.course_img)
  //上传文件的信息
  console.log('uploadFile', uploadFile)

  console.log('imageUrl.value', imageUrl.value)
}

//上传之前执行的回调
const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile) => {
  console.log(rawFile.type)
  isShowProgress.value = true
  //允许上传的类型数组
  const allowList = ['image/jpeg', 'image/png', 'image/jpg']
  let result = allowList.find((item) => item == rawFile.type)
  if (!result) {
    ElMessage.error('上传的图片必须是jpg/jpeg/png/格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传的图片不能超过2MB!')
    return false
  }

  // if (allowList.indexOf(rawFile.type) == -1) {
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('上传的图片不能超过2MB!')
  //   return false
  // }
  // return true
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 360px;
  height: 202px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 360px;
  height: 202px;
  text-align: center;
}
</style>
